import TradePagination from 'components/tradePagination';
import React from 'react';
import './footer.scss';
import { Select } from 'qnui';
import { FOOT_PAGE_SIZE } from 'tradePublic/consts';
interface FooterPageChangeProps {
    changePage: (value: PageInfo) => void;
    total: number;
    pageNo: number;
    pageSize: number;
}
class FooterPageChange extends React.Component<FooterPageChangeProps> {
    constructor (props: FooterPageChangeProps) {
        super(props);
    }
    /** 处理页码改变 */
    handleChangePageNo (value: number) {
        const { pageNo, pageSize } = this.props;
        if (pageNo === value) {
            return;
        }
        this.props.changePage({ pageNo: value, pageSize });
    }
    /** 处理分页大小改变 */
    handleChangePageSize (value: number) {
        const { pageNo, pageSize } = this.props;
        if (value === pageSize) return;
        this.setState({ pageSize: value });
        this.props.changePage({ pageNo, pageSize: value });
    }

    render () {
        const { pageNo, pageSize, total } = this.props;
        return <div className="footer-page-change">
            <TradePagination
              className="pageination-container"
              current={pageNo}
              pageSize={pageSize}
              size="medium"
              total={total}
              onChange={this.handleChangePageNo.bind(this)}
            />
            <Select style={{ margin: '0 10px' }} value={pageSize} onChange={this.handleChangePageSize.bind(this)}
                            dataSource={FOOT_PAGE_SIZE.batchPrint.map((page) => ({ value: page, label: `每页${page}单` }))}
            />
        </div>;
    }
}
export default FooterPageChange;
